<!-- 分类详情 -->
<template>
  <div>
    <HeaderTop :fixed="true">
      <template v-slot:left>
        <i class="iconfont icon-fanhui" @click="$router.back()"></i>
      </template>
      <template v-slot:middle>{{ title }}</template>
    </HeaderTop>

    <Dropdown @state="changeList"></Dropdown>

    <div class="content">
      <template v-if="reqShopList">
        <Shops :isShowTop="false" v-model="reqShopList" />
      </template>
    </div>
  </div>
</template>

<script>
import Dropdown from "../../components/Dropdown/Dropdown.vue";
import HeaderTop from "../../components/headerTop/HeaderTop.vue";
import Shops from "../../components/shops/Shops.vue";
import { reqShops } from "../../apis/profile/profile";
export default {
  data() {
    return {
      reqShopList: null,
      directives: {
        random: (list) => {
          for (let i = 0, len = list.length; i < len; i++) {
            let currentRandom = parseInt(Math.random() * (len - 1));
            let current = list[i];
            list[i] = list[currentRandom];
            list[currentRandom] = current;
          }
          this.reqShopList = list;
        },
        defaultSort: () => {
          reqShops().then((response) => {
            this.reqShopList = response.data.data;
          });
        },
        monthlySales: (list) => {
          this.reqShopList = list.sort((a, b) => {
            return b["recent_order_num"] - a["recent_order_num"];
          });
        },
        priceMini: (list) => {
          this.reqShopList = list.sort((a, b) => {
            return (
              a["float_minimum_order_amount"] - b["float_minimum_order_amount"]
            );
          });
        },
        ratingHighest: (list) => {
          this.reqShopList = list.sort((a, b) => {
            return b["rating"] - a["rating"];
          });
        },
      },
    };
  },

  components: { HeaderTop, Dropdown, Shops },
  props: ["title"],
  computed: {},

  methods: {
    getShops() {
      reqShops().then((response) => {
        this.reqShopList = response.data.data;
      });
    },
    changeList(state) {
      if (this.directives[state]) {
        this.directives[state](JSON.parse(JSON.stringify(this.reqShopList)));
      }
    },
  },
  // 进入此路由前执行(导航完成进入之后获取)
  beforeRouteEnter(to, from, next) {
    //   来的位置
    next();
  },

  // 路由改变前，组件就已经渲染完了// 转入新的导航前调用
  beforeRouteUpdate(to, from, next) {
    next();
  },
  mounted() {
    this.getShops();
  },
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.iconfont
    font-size:20px
.content
  margin-top: 45px
</style>
